<template>
  <a-drawer
    title="修改区域"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="areaEditVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-form-item label='区域名称' v-bind="formItemLayout">
        <a-input v-decorator="['areaName',
                   {rules: [
                    { required: true, message: '区域名称不能为空'},
                    { max: 10, message: '长度不能超过10个字符'}
                  ]}]"/>
      </a-form-item>
      <a-form-item label='管理员名称' v-bind="formItemLayout">
        <a-input v-decorator="['rsName',
                   {rules: [
                    { required: true, message: '区域名称不能为空'},
                    { max: 10, message: '长度不能超过10个字符'}
                  ]}]"/>
        <a-input v-decorator="['rsMobile',
                   {rules: [
                    { max: 11, message: '长度不能超过11个字符'}
                  ]}]"/>
        <span style="float: right; margin-top: 3px;">
          <a-button type="primary" @click="searchRsModal">查询</a-button>
          <a-modal
            title="查询管理员"
            :visible="searchRsVisible"
            :confirm-loading="searchRsConfirmLoading"
            @cancel="handleSearchRsCancel"
          >
            <div :class="advanced ? 'search' : null">
              <!-- 搜索区域 -->
              <a-form layout="horizontal">
                <div :class="advanced ? null: 'fold'">
                  <a-row >
                    <a-col :md="12" :sm="24" >
                      <a-form-item
                        label="名称"
                        :labelCol="{span: 5}"
                        :wrapperCol="{span: 18, offset: 1}">
                        <a-input v-model="rsQueryParams.rsName"/>
                      </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="24" >
                      <a-form-item
                        label="身份证号"
                        :labelCol="{span: 5}"
                        :wrapperCol="{span: 18, offset: 1}">
                        <a-input v-model="rsQueryParams.rsCardId"/>
                      </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="24" >
                      <a-form-item
                        label="联系方式"
                        :labelCol="{span: 5}"
                        :wrapperCol="{span: 18, offset: 1}">
                        <a-input v-model="rsQueryParams.rsMobile"/>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
                <span style="float: right; margin-top: 3px;">
                  <a-button type="primary" @click="searchRs">查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetRs">重置</a-button>
                </span>
              </a-form>
            </div>
            <a-table :columns="rsColumns"
                     :key="rsKey"
                     :dataSource="rsDataSource"
                     :pagination="rsPagination"
                     :loading="searchRsloading"
                     @change="handleTableChange" :scroll="{ x: 1500 }">
              <template v-if="text" slot="icon" slot-scope="text, record">
               <a-icon :type="text" />
              </template>
              <template slot="operation" slot-scope="text, record">
                <a-icon v-hasPermission="['am:update']" type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="exchange(record)" title="替换"></a-icon>
                <a-badge v-hasNoPermission="['am:update']" status="warning" text="无权限"></a-badge>
              </template>
            </a-table>
          </a-modal>
        </span>
      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}
export default {
  name: 'AreaManagerEdit',
  props: {
      areaEditVisiable: {
      default: false
    }
  },
  data () {
    return {
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      areaTreeKey: +new Date(),
      tAM: {},
      checkedKeys: [],
      areaTreeData: [],
      defaultCheckedKeys: [],

      rsQueryParams: {},
      rsKey: +new Date(),
      rsDataSource: [],
      selectedRsRowKeys: [],
      rsPagination: {
          defaultPageSize: 10000000,
          hideOnSinglePage: true,
          indentSize: 100
      },
      searchRsConfirmLoading: false,
      searchRsloading: false,
      searchRsVisible: false
    }
  },
  computed: {
      rsColumns () {
          return [{
              title: '名称',
              dataIndex: 'rsName',
              width: 200,
              fixed: 'left'
          }, {
              title: '身份证号',
              dataIndex: 'cardId',
              width: 200,
              fixed: 'left'
          }, {
              title: '性别',
              dataIndex: 'ssex',
              fixed: 'left'
          }, {
              title: '民族',
              dataIndex: 'nation',
              fixed: 'left'
          }, {
              title: '政治面貌',
              dataIndex: 'politics',
              fixed: 'left'
          }, {
              title: '操作',
              dataIndex: 'operation',
              width: 120,
              scopedSlots: {customRender: 'operation'},
              fixed: 'right'
          }]
      }
  },
  methods: {
    reset () {
      this.loading = false
      this.areaTreeKey = +new Date()
      this.expandedKeys = this.checkedKeys = this.defaultCheckedKeys = []
      this.tAM = {}
      this.form.resetFields()
    },
    onClose () {
      this.reset()
      this.$emit('close')
    },
    setFormValues ({...tAM}) {
      this.form.getFieldDecorator('areaName')
      this.form.setFieldsValue({'areaName': tAM.areaName})
      this.form.getFieldDecorator('rsName')
      this.form.setFieldsValue({'rsName': tAM.rsName})
      this.form.getFieldDecorator('rsMobile')
      this.form.setFieldsValue({'rsMobile': tAM.rsMobile})
      this.tAM.id = tAM.id
      this.tAM.areaId = tAM.areaId
      this.tAM.rsId = tAM.rsId
      this.areaTreeKey = +new Date()
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          let tArea = this.form.getFieldsValue()
          tArea.id = this.tAM.id
          tArea.areaId = this.tAM.areaId
          tArea.rsId = this.tAM.rsId
          this.$put('areaManager', {
            ...tArea
          }).then(() => {
            this.reset()
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    searchRsModal () {
        this.searchRsVisible = true
    },
    searchRs () {
        let {filteredInfo} = this
        this.fetchRs({
            ...this.rsQueryParams,
            ...filteredInfo
        })
    },
    resetRs () {
        // 取消选中
        this.selectedRsRowKeys = []
        // 重置列过滤器规则
        this.filteredInfo = null
        // 重置查询参数
        this.queryParams = {}
        // 清空时间选择
        this.$refs.createTime.reset()
        this.fetchRs()
    },
    fetchRs (params = {}) {
        this.searchRsloading = true
        this.$get('tRs', {
            ...params
        }).then((r) => {
            let data = r.data
            this.searchRsloading = false
            this.dataSource = data.rows
        })
    },
    onSelectChange (selectedRowKeys) {
        this.selectedRsRowKeys = selectedRowKeys
    },
    handleSearchRsCancel () {
        this.visible = false
    },
    exchange ({...tAM}) {
        this.form.getFieldDecorator('rsName')
        this.form.setFieldsValue({'rsName': tAM.rsName})
        this.form.getFieldDecorator('rsMobile')
        this.form.setFieldsValue({'rsMobile': tAM.rsMobile})
        this.tAM.rsId = tAM.rsId
        this.areaTreeKey = +new Date()
    }
  },
  watch: {
    areaEditVisiable () {
      if (this.areaEditVisiable) {
        this.$get('areaManager', {

        }).then((r) => {
          this.areaTreeData = r.data.rows.children
          this.allTreeKeys = r.data.ids
          this.areaTreeKey = +new Date()
        })
      }
    }
  }
}
</script>
